<template>
  <div class="flex h-full">
    <a-card class="mr-2 h-full" :body-style="{ height: '100%', display: 'flex', flexDirection: 'column', padding: '8px' }">
      <a-select v-model:value="formState.templateType" class="w-full" placeholder="请选择" @change="getData">
        <a-select-option value="1">门诊</a-select-option>
        <a-select-option value="2">住院</a-select-option>
      </a-select>
      <BaseList :data-source="dataSource" :loading="loading" class="flex-1 overflow-auto mt-2">
        <template #renderItem="{ item }">
          <div class="py-2 px-3 flex justify-between items-center list-items" :class="{ active: selected?.id === item.id }" @click="onSelect(item)">
            <div class="w-[80%]">
              <div class="name font-semibold">{{ item.templateName }}</div>
              <div class="mt-1 truncate text-xs text-gray-400">{{ item.noticeTitle || '-' }}</div>
            </div>
            <div class="dropdown">
              <a-switch :checked="item.status" :un-checked-value="'0'" :checked-value="'1'" @change="onSave(item)" />
            </div>
          </div>
        </template>
      </BaseList>
    </a-card>
    <div class="flex flex-col flex-1 overflow-hidden mr-2">
      <a-card class="flex-1 overflow-auto" :body-style="{ padding: '8px', height: '100%', overflow: 'hidden' }">
        <BaseTitle title="推送内容" />

        <div class="mb-2 mr-2">
          <a-form :model="selected" class="form-style-flex">
            <a-form-item label="推送标题" class="w-full">
              <a-input ref="input" v-model:value="selected.noticeTitle" placeholder="请输入" @click="handleInput" />
            </a-form-item>

            <a-form-item label="推送正文" class="w-full">
              <a-textarea ref="textarea" v-model:value="selected.noticeContent" :rows="8" placeholder="请输入" @click="textareaInput" />
            </a-form-item>
          </a-form>
          <div class="flex justify-end">
            <a-button type="primary" @click="onSave()">保存</a-button>
          </div>
        </div>
      </a-card>
    </div>
    <a-card class="h-full" :body-style="{ height: '100%', width: '250px', display: 'flex', flexDirection: 'column', padding: '8px' }">
      <BaseTitle title="可选参数" />
      <div class="w-full flex flex-wrap">
        <a-button class="m-1" @click="inputInsert('{初/复诊}')">初/复诊</a-button>
        <a-button class="m-1" @click="inputInsert('{患者姓名}')">患者姓名</a-button>
        <a-button class="m-1" @click="inputInsert('{病区名称}')">病区名称</a-button>
        <a-button class="m-1" @click="inputInsert('{床位号}')">床位号</a-button>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'

const formState = ref({ templateType: '1' })
const loading = ref(false)
const dataSource = ref([])
const selected = ref({})
const inputIndex = ref(null)
const textareaIndex = ref(null)

const getData = async () => {
  loading.value = true
  const { data, code, msg } = await post('common/mqcommon/getSystemNoticeTemplateList', { templateType: formState.value.templateType })
  loading.value = false
  if (code !== 0) return message.error(msg || '查询失败')
  if (data.length > 0) {
    dataSource.value = data
    selected.value = data[0]
  } else {
    dataSource.value = []
  }
}
const handleInput = (event) => {
  inputIndex.value = event.srcElement.selectionStart
  textareaIndex.value = null
}
const textareaInput = (event) => {
  textareaIndex.value = event.srcElement.selectionStart
  inputIndex.value = null
}
const inputInsert = (e) => {
  if (inputIndex.value !== null) {
    const textBefore = selected.value.noticeTitle.substring(0, inputIndex.value)
    const textAfter = selected.value.noticeTitle.substring(inputIndex.value)
    selected.value.noticeTitle = textBefore + e + textAfter
  } else {
    const textBefore = selected.value.noticeContent.substring(0, textareaIndex.value)
    const textAfter = selected.value.noticeContent.substring(textareaIndex.value)
    selected.value.noticeContent = textBefore + e + textAfter
  }
}

const onSave = async (item) => {
  const params = ref({})
  if (item) {
    params.value = { ...item, status: item.status === '1' ? '0' : '1' }
  } else {
    params.value = selected.value
  }
  const { code, msg } = await post('common/mqcommon/saveSystemNoticeTemplate', { ...params.value })
  if (code !== 0) return message.error(msg || '操作失败')
  message.success(msg || '操作成功')
  getData()
}
const onSelect = (item) => {
  selected.value = item
}

onMounted(() => {
  getData()
})
</script>

<style lang="less" scoped></style>
